<template>
  <div id="all" class="mt24 mb24">
    <div class="assss-write">
      <!-- 无评价 -->
      <!-- <div class="assess-write-none">目前暂无评价的商品</div> -->
      <div class="assess-write-item" v-for="(value,index) in items" :key="index">
        <div class="assess-write-info">
          <div class="info-img">
            <img :src="value.imgs.split(',')[0]" alt />
          </div>
          <div class="info-title">
            <div class="info-title-inner">
              <p>{{value.product_name}}</p>
            </div>
          </div>
          <div class="info-date">
            <div class="info-title-inner">
              <p>{{value.creat_time}}</p>
            </div>
          </div>
          <div class="info-status">
            <div class="info-title-inner">
              <p>已评价</p>
            </div>
          </div>
          <div class="info-button">
            <el-button type="primary" @click="detail(value)" plain>查看评价</el-button>
             <el-dialog title="评价" :visible.sync="dialogFormVisible" class="dialog" center :lockScroll="false">
               <table  style="width: 100%;height:100%;table-layout: fixed;">
              <tr>
                <td>
                    <span class="demonstration">商品评分</span>
                    <br><br><br>
                    <el-rate v-model="form.point" :disabled="true" ></el-rate>
                </td>
                <td rowspan="2" > 
                <template>
                  <el-carousel :interval="4000" type="card" height="300px">
                    <el-carousel-item v-for="item in form.imgs" :key="item">
                    <img style="height:100%" :src="item" alt />
                    </el-carousel-item>
                  </el-carousel>
                </template>
              </td>
              </tr>
              <tr >
                <td >
                  <br><br><br>
                  <el-input type="textarea" :disabled="true" :rows="20" placeholder="请输入内容" v-model="form.content"></el-input>
                </td>
              </tr>
            </table>
            </el-dialog>
          </div>
        </div>
      </div>
      <!-- <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000"></el-pagination> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
      ],
      fileList:[],
      dialogFormVisible: false,
      form:{

      },
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  mounted(){
    this.init()
  },
  methods:{
    init(){
      this.axios.post("/comment/evaluated").then((resp)=>{
        this.items = resp.data
      })
    },
    detail(value){
        this.dialogFormVisible = true
        this.form.point = value.point
        this.form.content = value.content
        this.form.imgs = value.imgs.split(',')
        // this.fileList = []
        // let imgs = value.imgs.split(',')
        // for(let i =0;i<imgs.length;i++){
        //     this.fileList[i] = {}
        //     this.fileList[i].name =i,
        //     this.fileList[i].url = imgs[i]
        // }
        // console.log(this.fileList)
    }
  }
};
</script>

<style scoped>
/* 写评价列表 */
.assss-write {
  min-height: 157px;
  /* background-color: blue; */
}
/* 无评价 */
.assess-write-none {
  padding-top: 135px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.assess-write-item {
  box-sizing: border-box;
  padding: 40px 0;
  border-top: 1px solid #ddd;
}
.assess-write-item:first-child {
  border-top: 0;
}
.assess-write-info {
  overflow: hidden;
}
.assess-write-info .info-img {
  float: left;
  width: 114px;
  height: 114px;
}
.assess-write-info .info-img img {
  width: 100%;
}
.assess-write-info .info-title {
  float: left;
  width: 335px;
  height: 114px;
  margin-left: 26px;
  font-size: 14px;
  line-height: 22px;
  /* background-color: firebrick; */
}
.assess-write-info .info-title-inner {
  display: table-cell;
  vertical-align: middle;
  width: 435px;
  height: 114px;
}
.assess-write-info .info-title-inner p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.assess-write-info .info-date {
  float: left;
  width: 200px;
  height: 114px;
  margin-left: 26px;
  font-size: 14px;
  line-height: 22px;
  /* background-color: gold; */
}

.assess-write-info .info-status {
  float: left;
  width: 200px;
  height: 114px;
  margin-left: 26px;
  font-size: 14px;
  line-height: 22px;
  /* background-color: fuchsia; */
}

.assess-write-info .info-button {
  float: right;
  margin-top: 40px;
  margin-right: 17px;
  /* background-color: forestgreen; */
}
.el-button--primary.is-plain:hover {
  background-color: #29a3d6;
}

/* 评价标题 */
.dialog {
  text-align: left;
}

/* 上传 */
.el-upload {
  width: 100px;
  height: 100px;
  line-height: 98px;
}
</style>